<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <div v-for="item in items" :key="item.key">
    <a v-if="item.externalLink" :href="item.externalLink" target="_blank">{{ item.label }} </a>
  </div>
</template>

<style>
</style>

<script setup lang="ts">
import { computed } from 'vue'
import { routes } from '@/router/routes.ts'

const items = computed(() =>
  routes
    .filter((route) => !route.meta?.hide)
    .map(({ path, name, meta }) => ({
      key: path,
      label: name,
      title: meta?.title,
      externalLink: meta?.externalLink,
    })),
)
</script>
